<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React面试题</title>
    <link rel="stylesheet" href="../1style/index.css"/>
    <script src="../1style/jquery.js"></script>
</head>
<body>
<h1>React面试题2</h1>

<h3>hook解决了class的什么问题</h3>
<div>
    <pre>
        难以重用和共享组件中的与状态相关的逻辑 // 只是逻辑部分不是视图
        虽然高阶组件能解决复用,但是组件又被函数组件包括增加了复杂度
        类组件中的this增加学习成本
    </pre>
</div>

<h3>useState是同步还是异步</h3>
<div>
    <pre>
        bilibili.com/video/BV1ye4y1g784 //useState钩子函数的实现原理
      [count,setCount]=useState(0)
      setCount(1)// 这是异步的
      setCount(count=>{
        count=count+3;
        return count
      }) // 这是同步的
      setCount(count=>count=count+3;) // 函数式 是同步的
    </pre>
</div>

<h3>createContext,useContext</h3>
<div>
    <pre>
        主要是为了解决,createContext 子级调用的时候复杂度
    </pre>
</div>


<h3>useEffect</h3>
<div>
    <pre>
        useEffect意思是用于处理组件中的副作用，用来取代生命周期函数。
        react中componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个生命周期函数的组合
        useEffect(()=>{}) // componentDidMount，componentDidUpdate
        useEffect(()=>{}, []) //componentDidMount，
        useEffect(()=>()=>{})) // componentWillUnmount
        使用异步函数 useEffect(()=>{
            (async ()=>{
                await ...
            })()
        })
    </pre>
</div>

<h3>useMemo</h3>
<div>
    <pre>
        useMemo是用来缓存计算属性的。// 依赖项改变的时候才会发生变化
        const computedFun2 = useMemo(() => { //这种被称为计算属性，不需要手动调用，在渲染阶段就会执行的。
            console.log('我又执行计算了');
            return params2;
        },[params2])
        useMemo是在useEffect前面执行
    </pre>
</div>

<h3>memo</h3>
<div>
    <pre>
        memo是个包装函数||高阶函数||与React.PureComponent类似,进行的浅比较
        React.memo()可接受2个参数，组件，props，与shouldComponentUpdate()功能类似
        export default React.memo(Child,(prevProps,nextProps)=>{return true/false})//true是不渲染
    </pre>
</div>

<h3>useCallBack</h3>
<div>
    <pre>
        缓存函数
        const toChildFun = useCallBack(() => {
                console.log("需要传入子组件的函数");
                ...
        },[])
    </pre>
</div>

<h3>useRef</h3>
<div>
    <pre>
        const refContainer = useRef(initialValue);
        返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( initialValue )。
        返回的 ref 对象在组件的整个生命周期内保持不变
        当更新 current 值时并不会 render ，这是与 useState 不同的地方
            在DOM节点上定义ref属性，通过.current就可以获取到该DOM元素
            通过forwardRef就可以给函数子组件传入ref属性。
            使用useImperativeHandle用于定义暴露给父组件的ref方法
    </pre>
</div>

<h3>123</h3>
<div>
    <pre>
        {useHistory,useLocation,useRouteMatch,useParams} from 'react-router-dom'
        { Provider, useSelector, useDispatch } from 'react-redux';
    </pre>
</div>


</body>
</html>

<script>
    $(function () {
        $("h3").click(function () {
            $(this).next().toggle();
        });
    })
</script>

